<template>
  <div style="display: flex;">
    <Poptip trigger="hover" title="图片预览" placement="right" width="350">
      <Input
        v-model="currentValue"
        @on-change="handleChange"
        :placeholder="placeholder"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        clearable
      />
      <div slot="content">
        <img :src="currentValue" alt="无效的图片链接"
             style="width: 100%;margin: 0 auto;display: block;">
        <a @click="viewImage=true"
           style="margin-top:5px;text-align:right;display:block">查看大图</a>
      </div>
    </Poptip>
    <Upload
      :action="baseUrl+uploadUrl"
      :headers="token"
      :on-success="handleSuccess"
      :on-error="handleError"
      :format="['jpg','jpeg','png','gif','bmp']"
      accept=".jpg, .jpeg, .png, .gif, .bmp"
      :max-size="5120"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="beforeUpload"
      :show-upload-list="false"
      ref="up"
      class="upload"
      :data="data"
    >
      <Button :loading="loading" :size="size" :disabled="disabled" :icon="icon">
        上传图片
      </Button>
    </Upload>

    <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
      <img :src="currentValue" alt="无效的图片链接"
           style="width: 100%;margin: 0 auto;display: block;">
      <div slot="footer">
        <Button @click="viewImage=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  // import { uploadFile } from "@/api/index";
  import { BASE_URL } from "../../../libs/axios";

  export default {
    name: "uploadPicInput",
    props: {
      value: String,
      size: String,
      placeholder: {
        type: String,
        default: "可输入图片链接"
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
      maxlength: Number,
      icon: {
        type: String,
        default: "ios-cloud-upload-outline"
      },
      uploadUrl: {
        type: String,
        default: "",
      },
      data: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        token: {},
        currentValue: this.value,
        loading: false,
        viewImage: false,
        baseUrl: BASE_URL
      };
    },
    methods: {
      init () {
        this.token = {
          token: this.getStore("token")
        };
      },
      handleFormatError (file) {
        this.loading = false;
        this.$Notice.warning({
          title: "不支持的文件格式",
          desc:
          "所选文件‘ " +
          file.name +
          " ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件"
        });
      },
      handleMaxSize (file) {
        this.loading = false;
        this.$Notice.warning({
          title: "文件大小过大",
          desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 5M."
        });
      },
      beforeUpload () {
        this.loading = true;
        return true;
      },
      handleSuccess (res, file) {
        console.log('handleSuccess res', res)
        console.log('handleSuccess file', file)
        this.loading = false;
        if (res.code == 0) {
          file.url = BASE_URL + res.data;
          this.currentValue = BASE_URL + res.data;
          this.$emit("input", this.currentValue);
          this.$emit("on-change", this.currentValue);
        } else {
          this.$Message.error(res.message);
        }
      },
      handleError (error, file, fileList) {
        this.loading = false;
        this.$Message.error(error.toString());
      },
      handleChange (v) {
        this.$emit("input", this.currentValue);
        this.$emit("on-change", this.currentValue);
      },
      setCurrentValue (value) {
        if (value === this.currentValue) {
          return;
        }
        this.currentValue = value;
        this.$emit("on-change", this.currentValue);
      }
    },
    watch: {
      value (val) {
        this.setCurrentValue(val);
      }
    },
    created () {
      this.init();
    }
  };
</script>

<style lang="less">
  .upload {
    display: inline-block;
    margin-left: 10px;
  }
</style>

